code-highlight {
    display: block;
}

code-highlight:not(.inline) {
    display: block;
    margin: 12px 0;
    max-width: 100%;
}

pre {
    overflow: auto;
    overflow: overlay;
    @supports not (-webkit-hyphens: none) {
        /* in safari this breaks scrolling styling, so we need to exclude it*/
        scrollbar-width: thin;
    }
    max-width: 100%;
    margin: 0;

    scrollbar-color: rgba(169, 173, 175, 0.77) transparent;

    &::-webkit-scrollbar {
        height: 10px;
        width: 10px;
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba(169, 173, 175, 0.77);
        border-radius: 8px;
        border: 2px solid rgba(0, 0, 0, 0.01);
        background-clip: padding-box;

        &:hover {
            cursor: default;
            background: #727475;
            border: 2px solid rgba(0, 0, 0, 0.01);
            background-clip: padding-box;
        }
    }
}

code-highlight.inline pre {
    border: unset;
    background: unset;
    padding: unset;
    margin: unset;
    font-size: unset;
    overflow: unset;
    white-space: unset;
}

pre.codeHighlight[title] {
    padding-top: 8px;
}

pre.codeHighlight[title]:before {
    display: block;
    text-align: left;
    content: attr(title);
    margin-bottom: 10px;
    font-size: 12px;
    color: #818181;
    border-bottom: 1px solid rgba(129, 129, 129, 0.2);
}

code[class*="language-"],
pre[class*="language-"] {
    padding: 5px;
}

.dui-theme-dark {
    :not(pre) > code[class*="language-"] {
        white-space: normal;
        border-radius: 0.2em;
        padding: 0.1em;
    }

    .language-css > code,
    .language-sass > code,
    .language-scss > code {
        color: #fd9170;
    }

    [class*="language-"] .namespace {
        opacity: 0.7;
    }

    .token.atrule {
        color: #c792ea;
    }

    .token.attr-name {
        color: #79c0ff;
    }

    .token.attr-value {
        color: #a5d6ff;
    }

    .token.attribute {
        color: #79c0ff;
    }

    .token.boolean {
        color: #c792ea;
    }

    .token.builtin {
        color: #ffcb6b;
    }

    .token.cdata {
        color: #80cbc4;
    }

    .token.char {
        color: #80cbc4;
    }

    .token.class {
        color: #ffcb6b;
    }

    .token.class-name {
        color: #f2ff00;
    }

    .token.comment {
        color: #616161;
    }

    .token.constant {
        color: #c792ea;
    }

    .token.deleted {
        color: #ff6666;
    }

    .token.doctype {
        color: #616161;
    }

    .token.entity {
        color: #ff6666;
    }

    .token.function {
        color: #c792ea;
    }

    .token.hexcode {
        color: #f2ff00;
    }

    .token.id {
        color: #c792ea;
        font-weight: bold;
    }

    .token.important {
        color: #c792ea;
        font-weight: bold;
    }

    .token.inserted {
        color: #80cbc4;
    }

    .token.keyword {
        color: #c792ea;
    }

    .token.number {
        color: #fd9170;
    }

    .token.operator {
        color: #89ddff;
    }

    .token.prolog {
        color: #616161;
    }

    .token.property {
        color: #80cbc4;
    }

    .token.pseudo-class {
        color: #a5e844;
    }

    .token.pseudo-element {
        color: #a5e844;
    }

    .token.punctuation {
        color: #89ddff;
    }

    .token.regex {
        color: #f2ff00;
    }

    .token.selector {
        color: #ff6666;
    }

    .token.string {
        color: #a5e844;
    }

    .token.symbol {
        color: #c792ea;
    }

    .token.tag {
        color: #7ee787;
    }

    .token.unit {
        color: #fd9170;
    }

    .token.url {
        color: #ff6666;
    }

    .token.variable {
        color: #ff6666;
    }

}

.dui-theme-light {
    code[class*="language-"],
    pre[class*="language-"] {
        color: #111b27;
        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        line-height: 1.5;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }

    /* Code blocks */
    pre[class*="language-"] {
        padding: 1em;
        margin: 0.5em 0;
        overflow: auto;
    }

    /* Inline code */
    :not(pre) > code[class*="language-"] {
        padding: 0.1em 0.3em;
        border-radius: 0.3em;
        white-space: normal;
    }

    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata {
        color: #3c526d;
    }

    .token.punctuation {
        color: #111b27;
    }

    .token.delimiter.important,
    .token.selector .parent,
    .token.tag,
    .token.tag .token.punctuation {
        color: #006d6d;
    }

    .token.attr-name,
    .token.boolean,
    .token.boolean.important,
    .token.number,
    .token.constant,
    .token.selector .token.attribute {
        color: #755f00;
    }

    .token.class-name,
    .token.key,
    .token.parameter,
    .token.property,
    .token.property-access,
    .token.variable {
        color: #005a8e;
    }

    .token.attr-value,
    .token.inserted,
    .token.color,
    .token.selector .token.value,
    .token.string,
    .token.string .token.url-link {
        color: #116b00;
    }

    .token.builtin,
    .token.keyword-array,
    .token.package,
    .token.regex {
        color: #af00af;
    }

    .token.function,
    .token.selector .token.class,
    .token.selector .token.id {
        color: #7c00aa;
    }

    .token.atrule .token.rule,
    .token.combinator,
    .token.keyword,
    .token.operator,
    .token.pseudo-class,
    .token.pseudo-element,
    .token.selector,
    .token.unit {
        color: #a04900;
    }

    .token.deleted,
    .token.important {
        color: #c22f2e;
    }

    .token.keyword-this,
    .token.this {
        color: #005a8e;
    }

    .token.important,
    .token.keyword-this,
    .token.this,
    .token.bold {
        font-weight: bold;
    }

    .token.delimiter.important {
        font-weight: inherit;
    }

    .token.italic {
        font-style: italic;
    }

    .token.entity {
        cursor: help;
    }

    .language-markdown .token.title,
    .language-markdown .token.title .token.punctuation {
        color: #005a8e;
        font-weight: bold;
    }

    .language-markdown .token.blockquote.punctuation {
        color: #af00af;
    }

    .language-markdown .token.code {
        color: #006d6d;
    }

    .language-markdown .token.hr.punctuation {
        color: #005a8e;
    }

    .language-markdown .token.url > .token.content {
        color: #116b00;
    }

    .language-markdown .token.url-link {
        color: #755f00;
    }

    .language-markdown .token.list.punctuation {
        color: #af00af;
    }

    .language-markdown .token.table-header {
        color: #111b27;
    }

    .language-json .token.operator {
        color: #111b27;
    }

    .language-scss .token.variable {
        color: #006d6d;
    }

    /* overrides color-values for the Show Invisibles plugin
     * https://prismjs.com/plugins/show-invisibles/
     */
    .token.tab:not(:empty):before,
    .token.cr:before,
    .token.lf:before,
    .token.space:before {
        color: #3c526d;
    }

    /* overrides color-values for the Toolbar plugin
     * https://prismjs.com/plugins/toolbar/
     */
    div.code-toolbar > .toolbar a,
    div.code-toolbar > .toolbar button {
        color: #e3eaf2;
        background: #005a8e;
    }

    div.code-toolbar > .toolbar a:hover,
    div.code-toolbar > .toolbar a:focus,
    div.code-toolbar > .toolbar button:hover,
    div.code-toolbar > .toolbar button:focus {
        color: #e3eaf2;
        background: #005a8eda;
        text-decoration: none;
    }

    div.code-toolbar > .toolbar span,
    div.code-toolbar > .toolbar span:hover,
    div.code-toolbar > .toolbar span:focus {
        color: #e3eaf2;
        background: #3c526d;
    }

    /* overrides color-values for the Line Highlight plugin
     * http://prismjs.com/plugins/line-highlight/
     */
    .line-highlight {
        background: #8da1b92f;
        background: linear-gradient(to right, #8da1b92f 70%, #8da1b925);
    }

    .line-highlight:before,
    .line-highlight[data-end]:after {
        background-color: #3c526d;
        color: #e3eaf2;
        box-shadow: 0 1px #8da1b9;
    }

    pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
        background-color: #3c526d1f;
    }

    /* overrides color-values for the Line Numbers plugin
     * http://prismjs.com/plugins/line-numbers/
     */
    .line-numbers .line-numbers-rows {
        border-right: 1px solid #8da1b97a;
        background: #d0dae77a;
    }

    .line-numbers-rows > span:before {
        color: #3c526dda;
    }

    /* overrides color-values for the Match Braces plugin
     * https://prismjs.com/plugins/match-braces/
     */
    .rainbow-braces .token.punctuation.brace-level-1,
    .rainbow-braces .token.punctuation.brace-level-5,
    .rainbow-braces .token.punctuation.brace-level-9 {
        color: #755f00;
    }

    .rainbow-braces .token.punctuation.brace-level-2,
    .rainbow-braces .token.punctuation.brace-level-6,
    .rainbow-braces .token.punctuation.brace-level-10 {
        color: #af00af;
    }

    .rainbow-braces .token.punctuation.brace-level-3,
    .rainbow-braces .token.punctuation.brace-level-7,
    .rainbow-braces .token.punctuation.brace-level-11 {
        color: #005a8e;
    }

    .rainbow-braces .token.punctuation.brace-level-4,
    .rainbow-braces .token.punctuation.brace-level-8,
    .rainbow-braces .token.punctuation.brace-level-12 {
        color: #7c00aa;
    }

    /* overrides color-values for the Diff Highlight plugin
     * https://prismjs.com/plugins/diff-highlight/
     */
    pre.diff-highlight > code .token.deleted:not(.prefix),
    pre > code.diff-highlight .token.deleted:not(.prefix) {
        background-color: #c22f2e1f;
    }

    pre.diff-highlight > code .token.inserted:not(.prefix),
    pre > code.diff-highlight .token.inserted:not(.prefix) {
        background-color: #116b001f;
    }

    /* overrides color-values for the Command Line plugin
     * https://prismjs.com/plugins/command-line/
     */
    .command-line-prompt {
        border-right: 1px solid #8da1b97a;
    }

    .command-line-prompt > span:before {
        color: #3c526dda;
    }
}
